<template>
  <div class="info-scroll">
    <div>
      <img src="@/assets/icon_horn.png" alt class="icon_horn">
    </div>
    <div class="right">
      <div class="prise-wz">今日奖品:</div>
      <ul class="scroll-content" :style="{ top }">
        <li v-for="(item, index) in prizeList" :key="index">{{ item.list }}</li>
      </ul>
    </div>
  </div>
</template>
<script>
import { prizeToday } from '@/api/utils'
export default {
    data() {
        return {
            prizeList: [],
            activeIndex: 0
        }
    },
    computed: {
        top() {
            return -this.activeIndex * 40 + 'px'
        }
    },
    async created() {
        if (this.getQueryVariable('token')) {
            localStorage.setItem('token', this.getQueryVariable('token'))
            window.location.href = 'http://lj.unmcc.com/#/home'
            // window.location.href = 'http://192.168.8.107:8081/#/home'
        } else {
            if (!localStorage.getItem('token')) {
                console.log(404)
            }
        }

        const res = await prizeToday()
        this.prizeList = res.data || []
        console.log(process.env.NODE_ENV)
        if (process.env.NODE_ENV === 'development') {
            this.prizeList = [
                { list: '海底捞火锅餐饮券' },
                { list: '苏福记火锅餐饮券' },
                { list: '重庆老板火锅餐饮券' },
                { list: '豪享来牛排双人套餐券' },
                { list: '哈根达斯冰淇淋券' }
            ]
        }
        console.log(res)
    },
    mounted() {
        setInterval(_ => {
            if (this.activeIndex < this.prizeList.length) {
                this.activeIndex += 1
            } else {
                this.activeIndex = 0
            }
        }, 1000)
    },
    methods: {
        getQueryVariable(variable) {
            const query = window.location.search.substring(1)
            const vars = query.split('&')
            for (let i = 0; i < vars.length; i++) {
                const pair = vars[i].split('=')
                if (pair[0] == variable) {
                    return pair[1]
                }
            }
            return false
        }
    }
}
</script>
<style lang="less" scoped>
.info-scroll {
  background: #ffd737;
  margin: 4% auto 3%;
  display: flex;
  align-items: center;
  padding: 5px;
  border-radius: 5px;
  height: 40px;
  overflow: hidden;
  .prise-wz {
    font-size: 14px;
    padding-left: 5px;
  }
  .prise {
    font-size: 17px;
    padding-left: 10px;
    font-weight: bold;
    color: rgb(193, 73, 223);
  }
}
.info {
  text-align: center;
  color: #b8b8b8;
  margin-top: 15px;
}
.icon_horn {
  width: 76px / 1.7;
  height: 64px / 1.7;
}
.right {
  display: flex;
  height: 40px;
  line-height: 40px;
}
.scroll-content {
  position: relative;
  transition: top 0.9s;
}
li {
  font-size: 17px;
  padding-left: 10px;
  font-weight: bold;
  color: rgb(193, 73, 223);
  line-height: 40px;
}
</style>
